<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Promise异步加载图片</title>
  </head>
  <body></body>
  <script>
    function loadImage(src) {
      return new Promise((resolve, reject) => {
        const image = new Image();
        image.src = src;
        image.onload = () => {
          resolve(image);
        };
        image.onerror = reject;
        document.body.appendChild(image);
      });
    }
    loadImage("images/原子表.png")
      .then((image) => {
        image.style.border = "solid 6px red";
      })
      .catch(() => {
        console.log("图片地址错误");
      });
  </script>
</html>
